<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .d1{
                width: 300px;
                height: 300px;
                border: 1px solid salmon;
            }

        </style>
    </head>
    <body>
            <div class="d1"></div>
                
            <script type="text/javascript">
                const d1 = document.querySelector(".d1");
               
                window.onkeydown = function(){
                    const xhr = new XMLHttpRequest();
                     //自动设置响应的类型
                    // xhr.responseType = "json";
                    xhr.open("GET","http://127.0.0.1:8000/json-server");
                    xhr.send();
                    xhr.onreadystatechange = function(){
                        if(xhr.readyState === 4){
                            if(xhr.status >= 200 && xhr.status < 300){
                                let data = JSON.parse(xhr.response);
                                console.log(data);
                                d1.innerHTML = data.name;
                                /* console.log(xhr.response);
                                d1.innerHTML = xhr.response.name; */
                            }
                        }
                    }

                }
            
            
            
            </script>
    </body>
</html>